Reach Peak Performance

Extensions are an addition to the browser, designed to provide supplementary and customized functionality. An extension that slows down or impairs the browsing experience is problematic to the user and counter to the Chrome extension objective. In addition to general good coding habits, developers should follow these practices to ensure their extensions are running at peak performance.

Defer Everything Possible

Refrain from loading resources until they are needed. Include only what is needed to open an extension in its startup function. Do not load things during startup that are only needed if the user clicks a button, or features that work only when the user is logged in before they have a chance to do so.

Manage Important Events

An efficient background script contains registered events that are important to their extension. They lie dormant until a listener is triggered, act accordingly, then return to a dormant state. It is a drain on system resources to keep an unneeded script running.

Background scripts should be registered in the manifest with their persistence set to false if possible.

{
  "name": "High Performance Extension",
  "description" : "Sleepy Background Script",
  "version": "1.0",
  ...
  "background": {
   "scripts": ["background.js"],
   "persistent": false
  },
  ...
}

The only occasion to keep a background script persistently active is if the extension uses chrome.webRequest API to block or modify network requests. The webRequest API is incompatible with non-persistent background pages.

{
  "name": "High Performance Extension",
  "description" : "Persistent Background Script",
  "version": "1.0",
  ...
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "https://<distracting social media site>.com/*"
  ],
 ...
 }

  chrome.webRequest.onBeforeRequest.addListener(
    function(details) {
      return {redirectUrl: "https://developer.chrome.com/"};
    },
    {urls: ["https://social.media.distraction.com/*"]},
    ["blocking"]
  );

Contain Content Scripts

Content scripts should work as the secret agents of an extension, subtly reading from or modifying the webpage while relying on the extension core to work heavier logic. They should have clear targets to avoid invasive activity on irrelevant pages. Ideally, content scripts should go unnoticed in the browsing experience aside from purposeful behavior.

Declare Targets

An extension running content scripts in unnecessary locations or at inappropriate times can cause the browser to slow down and potentially create functionality errors. Avoid this by providing match patterns in the manifest and running the script at document_idle instead of document_start.

{
  "name": "High Performance Extension",
  "description" : "Superfly Superlight Content Scripts",
  "version": "1.0",
  ...
  "content_scripts": [
    {
      "js": ["content_script.js"],
      "matches": ["https://developer.chrome.com/*"],
      "run_at": "document_idle"
    }
  ]
  ...
}

If an extension will only need to access a webpage with the user's action, have it injected programmatically. A programmatic injection will only run when a user invokes it.

  chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript({
      code: 'document.body.style.fontSize="100px"'
    });
  });

Use Content Scripts Only When Required

Many extensions may not need a content script at all to accomplish desired functionality. Using the declarativeContent API will set rules for the extension to recognize when relevant conditions are met. This is more efficient than a content script and uses less code!

If an extension needed to display a page action to the user when they visited a site with an HTML5 <video> element, it could specify a declarative rule.

  chrome.runtime.onInstalled.addListener(function() {
    chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
      chrome.declarativeContent.onPageChanged.addRules([
        {
          conditions: [
            new chrome.declarativeContent.PageStateMatcher({
              css: ["video"],
            })
          ],
          actions: [ new chrome.declarativeContent.ShowPageAction() ]
        }
      ]);
    });
  });

Evaluate Code Efficiency

The same general practices for website performance can be applied to extensions such as implement techniques of asynchronous programming and keeping code minimal and compact.

Use tools, such as Lighthouse, to evaluate an extensions performance and target areas that could improve on visual extension pages.